<template>
  <div class="containers">
    <div class="container">
      <div class="handle-box">
        <el-select v-model="state" @change="getDataPage" placeholder="请选择类型" size="mini" class="mr10">
          <el-option v-for="(item, index) in navlist" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="pay_type" @change="getDataPage" placeholder="请选择类型" size="mini" class="mr10">
          <el-option v-for="(item, index) in paytypelist" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>

        <el-input v-model="keyword" placeholder="关键词" style="width: 220px;" class="handle-input mr10" size="mini"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getDataPage" class="mr10" size="mini">搜索</el-button>
      </div>

      <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header" size="mini" border :height="$tableHight"
        @selection-change="handleSelectionChange" v-loading="loading">
        <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
        <el-table-column prop="business.name" label="商家"></el-table-column>
        <el-table-column prop="business.mobile" label="商家电话"></el-table-column>
        <el-table-column prop="money" label="提现金额"></el-table-column>
        <el-table-column prop="pay_money" label="到账金额"></el-table-column>

        <el-table-column label="提现方式" align="center">
          <template slot-scope="scope">
            {{  paytypelist[scope.row.pay_type+1].name }}
          </template>
        </el-table-column>
        <el-table-column label="信息" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="scope.row.pay_type==1">{{ JSON.parse(scope.row.data).name }}-{{ JSON.parse(scope.row.data).bank_id }}</div>
            <div v-if="scope.row.pay_type==2">{{ JSON.parse(scope.row.data).name }}-{{ JSON.parse(scope.row.data).bank_name }}-{{ JSON.parse(scope.row.data).bank_id }}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            {{  navlist[scope.row.state+1].name }}
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="拒绝原因"></el-table-column>
        <el-table-column  label="申请时间" width="160">
          <template slot-scope="scope" v-if="scope.row.CreatedAt">
            {{$clearTimer(scope.row.CreatedAt)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" v-if="scope.row.state==0"  @click="refundsList(scope.row.ID,0,0)">同意</el-button>
            <el-button size="mini" type="text" v-if="scope.row.state==0"  @click="refundsList(scope.row.ID,1,0)">拒绝</el-button>
            <el-button size="mini" type="text" v-if="scope.row.state==1"  @click="refundsList(scope.row.ID,0,1)">同意</el-button>
            <el-button size="mini" type="text" v-if="scope.row.state==1"  @click="refundsList(scope.row.ID,1,1)">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">

        <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="query.pageIndex"
          :page-sizes="[20, 30, 40, 50]" :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'basetable',
  data() {
    return {
      query: {
        pageIndex: 1,
         pageSize: 20
      },
      state: -1,
      pay_type:-1,//提现方式 (0, '微信'), (1, '支付宝'), (2, '银行卡')
      start_time:'',//起始时间
      end_time:'',//结束时间
      upload: '',
      editVisible: false,
      tableData: [],
      pageTotal: 0,
      imageUrl: '',
      videoUrl: '',
      type: 0,
      paytypelist: [
      {id:-1, name:'全部'},
      {id:0, name:'微信'},
      {id:1, name:'支付宝'},
      {id:2, name:'银行卡'},
      ],
      navlist: [
      {id:-1, name:'全部'},
      {id:0, name:'待审核'},
      {id:1, name:'初审通过'},
      {id:2, name:'终审通过'},
      {id:3, name:'下发中'},
      {id:4, name:'失败'},
      ],
      keyword: '',
      loading:false
    };
  },
  created() {
    this.getData()
  },
  methods: {
    //修改size值
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val
      this.getData();
    },
    getDataPage() {
      this.query.pageIndex = 1
      this.getData()
    },
    geteval(img){
      return eval('('+img+')')
    },
    //审核
    refundsList(order, code, type) {
      if (code == 1) {
        this.$prompt('请输入拒绝原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.request('admin/businessChasOrders/', type == 0 ? 'POST' : 'PUT', { id: order, code: code, reason: value }).then(res => {
            if (res.errno == 0) {
              this.$message.success(res.errmsg);
              this.getData()
            } else {
              this.$message.error(res.errmsg);
            }
          })
        }).catch(() => {

        });
      } else {
        this.request('admin/businessChasOrders/', type == 0 ? 'POST' : 'PUT', { id: order, code: code }).then(res => {
          if (res.errno == 0) {
            this.$message.success(res.errmsg);
            this.getData()
          } else {
            this.$message.error(res.errmsg);
          }
        })
      }
    },
    open(){

    },
    //获取数据
    getData() {
      	this.loading=true
        this.request('admin/businessChasOrders/', 'get', { page: this.query.pageIndex, size: this.query.pageSize,state:this.state,keyword:this.keyword,pay_type:this.pay_type}).then(res => {
        this.tableData = res.data.data
        this.pageTotal = res.data.total
      	this.loading=false
      })
    },

    cancel() {
      this.getData();
    },

    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val);
      this.getData();
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.el-upload--text {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;

  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  /* width: 100px; */
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 178px;
  display: block;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 60px;
  height: 60px;

  .el-image img {
    object-fit: cover;
  }
}

/* 设置分页按钮样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}
</style>
